<template>
	<view style="height: 100vh; background-color: #f5f5f5">
		<topLogo></topLogo>
		<view style=" padding: 20px; box-sizing: border-box">
			<view
				style="height: 94vh; background-color: #fff; border-radius: 8px ;padding:20px;box-sizing: border-box;">

				<view
					style="margin-bottom: 160px; background-color: #090; display: flex;border-bottom: 1px solid #f5f5f5; background-color: #fff; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 20px; border-radius: 8px 8px 0 0">
					<text style="font-weight: 600; font-size: 20px; color: #666666">人脸认证</text>
					<view @click="back" v-show="showBottomBtn"
						style="display: flex;align-items: center; width: 100px; border-radius: 3px; padding: 8px 20px;box-sizing: border-box; background-color: #0052d9">
						<text style="color: #fff;margin-right: 8px; padding-top: 3px;">返回</text>
						<image src="/static/back.png" style=" width: 18px;height: 18px;" mode="">
						</image>
					</view>

				</view>

				<view
					style="margin-bottom: 60px; height: 78%;display: flex;justify-content: center;align-items: start;">

					<view style="width: 100%;height: 80%;display: flex;flex-direction: column;align-items: center;">
						<view style="margin-bottom: 100px;">
							<text style="font-weight: 600;font-size: 30px;color: #333333;">
								为保证本人操作，请进行人脸认证
							</text>
						</view>
						<view style="margin-bottom: 100px;">
							<image src="/static/touxiang.png" style=" width: 600px;height: 600px;" mode=""></image>
						</view>
						<view style=" display: flex;justify-content: space-around;width: 60%;">
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/zhedang@2x.png"
									style="width: 80px;height: 80px;margin-bottom: 16px;" mode=""></image>
								<text style="font-size: 30px;color: #666666;">避免遮挡</text>
							</view>
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/guangxian.png" style="width: 80px;height: 80px;margin-bottom: 16px;"
									mode=""></image>
								<text style="font-size: 30px;color: #666666;">光线充足</text>
							</view>
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/shouji.png" style="width: 80px;height: 80px;margin-bottom: 16px;"
									mode=""></image>
								<text style="font-size: 30px;color: #666666;">正对手机</text>
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<button :loading="uploading" v-show="showBottomBtn" class="upload-btn" @click="takePhoto">
						人脸识别消课
					</button>
				</view>

			</view>
			<!-- :showConfirmButton='false' :showCancelButton='false' -->
			<up-modal title="审核失败" v-model:show="fail" :show-confirm-button="false" width="660px">

				<view
					style="display: flex;flex-direction: column; width: 100%; padding: 30px 30px 0; border-top: 1px solid #e8e8e8">
					<view style="margin-bottom: 50px;width: 100%;text-align: center;">
						<text style="font-size: 20px; color: #333333">{{ errMessage }}</text>
					</view>
					<view style="padding-bottom: 30px; display: flex;width: 100%;justify-content: center;">
						<view @click="takePhoto"
							style="margin-right: 15px; display: flex;justify-content: center;align-items: center; width: 132px;height: 48px;background: #E1E1E1;border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;font-size: 20px;color: #6B6B6B;">重新检测</text>
						</view>
						<view @click="toTakePhotoPage" style="display: flex;justify-content: center;align-items: center; width: 132px;
						height: 48px;
						background: #0052D9;
						border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;
						font-size: 20px;
						color: #fff;">更改图片</text>
						</view>
					</view>
				</view>

			</up-modal>

		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import topLogo from '@/components/topLogo.vue';
	import {
		updateStudentFace
	} from '@/api/getData.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		url
	} from '../../uni_modules/uview-plus/libs/function/test';
	// 接收页面传参（如 faceimg, tid, id）
	const fail = ref(false)
	const show = () => {
		fail.value = true
	}
	const showBottomBtn = ref(true)
	const tid = ref('')
	const id = ref('')

	// 本地状态
	const photoPreview = ref('') // 预览图
	const uploading = ref(false) // 上传状态


	const errMessage = ref('未检测到学生面部特征!')
	const uploadP = async () => {
		uni.showLoading({
			title: '审核中...'
		})
		showBottomBtn.value = false

		console.log('消课传参', courseList.value);
		try {
			const res = await uni.uploadFile({
				url: 'https://tsr.dingshengtaiqiu.com/billiards-data/jnjy/big/screen/completedCourse',
				filePath: photoPreview.value,
				name: 'file',
				formData: {
					paramListJson: courseList.value,
				}
			})
			console.log(res);
			// if (err) throw new Error('网络错误')

			const data = JSON.parse(res.data)
			console.log('消课成功返回值', data);
			if (data.code == 200) {
				uni.showToast({
					title: '消课成功'
				})
				uni.setStorageSync('xiaokeList', data.data)
				//返回课程页
				// setTimeout(() => uni.navigateBack(), 1000) 
				console.log('checkFace页面返回时学生Id：', studentId.value);
				setTimeout(() => uni.navigateTo({
					url: '/pages/studentSubClass/studentSubClass?isSuccess=1' + '&id=' +
						studentId.value + '&campusId=' + campusId.value
				}), 1000)
			} else {
				errMessage.value = data.message
				fail.value = true
				showBottomBtn.value = true
				// throw new Error(data.message || '上传失败')
			}
		} catch (err) {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		} finally {
			setTimeout(() => uploading.value = false, 2000)

			showBottomBtn.value = true
			uni.hideLoading()
		}
	}


	// 拍照并上传
	const takePhoto = async () => {
		if (uploading.value) return

		uploading.value = true
		fail.value = false
		// try {
		// 调用原生相机拍照
		const res = await uni.chooseImage({
			count: 1, // 只拍一张
			sourceType: ['camera'], // 只从相机拍摄
			sizeType: ['compressed'], // 压缩图片，避免过大
		})

		const tempFilePath = res.tempFilePaths[0]
		photoPreview.value = tempFilePath // 显示预览（可选）
		uploadP()

	}
	const back = () => {
		// uni.navigateTo({
		// 	url: '/pages/index/index'
		// })
		uni.navigateBack()
	}

	const toTakePhotoPage = () => {
		fail.value = false
		uni.navigateTo({
			url: '/pages/checkFaceTakePhoto/checkFaceTakePhoto?campusId=' + campusId.value + '&studentId=' +
				studentId.value
		})
	}

	const campusId = ref(null)
	const studentId = ref(null)
	const courseList = ref(null)
	const faceUrl = ref(null)
	onLoad((options) => {
		campusId.value = uni.getStorageSync('campusId')
		studentId.value = uni.getStorageSync('studentId')
		courseList.value = uni.getStorageSync('courseList')
		console.log('重新录入的人脸url', options.faceUrl);
		console.log('onLoad中的课程列表', courseList.value);
		if (options.faceUrl) {
			courseList.value = JSON.parse(uni.getStorageSync('courseList'))
			courseList.value.forEach(item => item.faceUrl = options.faceUrl)
			courseList.value = JSON.stringify(courseList.value)
		}
		if (options.campusId) {
			takePhoto()
		}
	});
	onMounted(() => {
		console.log(courseList.value);
		console.log('checkFace-onMounted');
	})
	onShow(() => {

		// takePhoto()
	})
</script>

<style scoped>
	.container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 60rpx;
	}

	.highlight {
		color: #007aff;
		font-weight: 500;
	}

	.preview-container {
		width: 60%;
		aspect-ratio: 4/5;
		/* margin-bottom: 60rpx; */
		/* border: 2rpx dashed #ddd; */
		border-radius: 16rpx;
		overflow: hidden;
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.upload-btn {
		width: 100%;
		height: 66px;
		/* position: absolute; */
		/* bottom: 50px; */
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0052D9;
		font-weight: 600;
		box-sizing: border-box;
		border-radius: 3px;
		font-size: 24px;
		color: #FFFFFF;
	}

	.upload-btn:active {
		background-color: #0056b3;
	}
</style>